<!--
 * @Author: boyyang
 * @Date: 2022-01-02 23:05:12
 * @LastEditTime: 2022-02-21 16:04:53
 * @LastEditors: boyyang
 * @Description: 消息弹框
 * @FilePath: \boyyang\plugin\boyyangUI\message\messageProvider.vue
-->

<template>
    <teleport to="body">
        <div class="message-content">
            <message-wrapper :content="messages"></message-wrapper>
        </div>
    </teleport>
    <slot></slot>
</template>

<script lang="ts" setup>
import messageWrapperVue from './messageWrapper.vue'
import { createId } from 'seemly'
import { providerKey, IMessageApi, IMessageOption, IMessageContent } from './messageType'

interface IProps {
    max?: number
}
const props = withDefaults(defineProps<IProps>(), {
    max: 5
})

const api: IMessageApi = {
    info(msg: string, option?: IMessageOption) {
        let content = {
            msg,
            option,
            type: 'info'
        }
        createMsg(content)
    },
    success(msg: string, option?: IMessageOption) {
        let content = {
            msg,
            ...option,
            type: 'success'
        }
        createMsg(content)
    },
    error(msg: string, option?: IMessageOption) {
        let content = {
            msg,
            ...option,
            type: 'error'
        }
        createMsg(content)
    },
    warning(msg: string, option?: IMessageOption) {
        let content = {
            msg,
            ...option,
            type: 'warning'
        }
        createMsg(content)
    }
}

const messages = ref<IMessageContent[]>([])

provide(providerKey, api)

const createMsg = (content: IMessageContent) => {
    let max = props.max
    if (messages.value.length > max) {
        messages.value.shift()
    }
    messages.value.push({
        ...content,
        id: createId()
    })
}
</script>

<style lang="scss" scoped>
.message-content {
    position: absolute;
    top: 0;
    width: 100%;
    height: 0;
    z-index: 999;
}
</style>
